<template>
  <div class="app-container">
    
    <div class="filter-container">
      <el-form :inline="true">
        <el-form-item label="行政区域">
          <el-cascader
            placeholder="请选择行政区域"
            v-model="temp.adminstrativeArr"
            :options="areaList.children"
            :props="{
              label: 'label',
              value: 'label'
            }"
            @change="handleCityChange"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="单位名称">
          <el-select v-model="listQuery.item.username" placeholder="请选择单位" clearable="">
            <el-option
              v-for="item in companyList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检测点数据类型">
          <el-select v-model="listQuery.item.username" placeholder="请选择检测数据类型" clearable="">
            <el-option
              v-for="item in companyList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备状态">
          <el-select v-model="listQuery.item.username" placeholder="请选择设备状态" clearable="">
            <el-option
              v-for="item in companyList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" icon="el-icon-search" @click="handleFilter" :loading="btnLoading">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      :data="list"
      v-loading="listLoading"
      border 
      fit 
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="行政区域" width="100">
        <template slot-scope="scope">
          <span>大兴区</span>
        </template>
      </el-table-column>
      <el-table-column label="单位名称" min-width="120">
        <template slot-scope="scope">
          <span>{{scope.row.username || '--'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="监测点名称" min-width="140">
        <template slot-scope="scope">
          <span>{{scope.row.company || '--'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="监测点数据类型" width="140">
        <template slot-scope="scope">
          <span>{{scope.row.adminstrative || '--'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="最后检测时间" width="160" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.addTime || '--'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="监测点数据状态" width="120">
        <template slot-scope="scope">
          <span>在线/离线</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="120"  class-name="small-padding fixed-width handle-td">
        <template slot-scope="scope">
          <i 
            class="el-icon-document" 
            title="油烟数据"
            @click="handleView(scope.row)" 
          >
          </i>
          <i 
            class="el-icon-document" 
            title="净化器数据"
            @click="handleViewJHQ(scope.row)" 
          >
          </i>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination 
        background 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange" 
        :current-page="listQuery.page.num" 
        :page-size="listQuery.page.size" 
        layout="total, prev, pager, next, jumper" 
        :total="listQuery.page.total"
      >
      </el-pagination>
    </div>

    <el-dialog 
      :title="textMap[dialogStatus]" 
      :visible.sync="dialogFormVisible" 
      :close-on-click-modal="false"
      width="100%"
    >
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getList } from '@/api/isp'
import { mapGetters } from 'vuex'

import areaList from '../../../static/json/area.json'

export default {
  name: 'IspIndex',
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  components: {
  },
  data() {
    return {
      btnLoading: false,
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        view: '油烟数据',
        viewJHQ: '净化器数据'
      },
      dialogVisible: false,
      temp: {
        username: '', // 负责人姓名
        adminstrativeArr: [],
        adminstrative: '', // 行政区域
        address: '', // 详细地址
        company: '', // 公司名称
        job: '', // 所在岗位
        telephone: '', // 联系电话
        creditCode: '', // 信用代码
        dischargePermit: '', // 排污许可
        userId: '' // 当前登录人ID
      },
      listLoading: false,
      list: [],
      listQuery: {
        page: {
          num: 1,
          total: 0,
          size: 10
        },
        item: {
          name: ''
        }
      },
      // 行政区域数据
      areaList,
      companyList: [
        {
          value: '1',
          label: '选项1'
        },
        {
          value: '2',
          label: '选项2'
        },
        {
          value: '3',
          label: '选项3'
        }
      ]
    }
  },
  watch: {
    // 表单内容体
    temp: {
      handler: function(val, oldVal) {
      },
      deep: true
    },
    // 搜索条件体
    listQuery: {
      handler: function(val, oldVal) {
      },
      deep: true
    }
  },
  created() {
    this.listQuery.item.userId = this.token
    this.temp.userId = this.token * 1
    // 取列表
    this.getList()
  },
  activated() {
    // 取列表
    this.getList()
  },
  deactivated() {
  },
  methods: {
    // 选择地区
    handleCityChange(value) {
    },
    // 改变每页显示条数
    handleSizeChange(val) {
      this.listQuery.page.size = val
      this.getList()
    },
    // 改变当前页面
    handleCurrentChange(val) {
      this.listQuery.page.num = val
      this.getList()
    },
    // 搜索
    handleFilter() {
      this.btnLoading = true
      this.listQuery.page.num = 1
      this.getList().then(() => {
        this.btnLoading = false
      }).catch(() => {
        this.btnLoading = false
      })
    },
    // 获取列表
    getList() {
      this.listLoading = true
      return getList(this.listQuery).then(response => {
        this.list = response.data
        this.listQuery.page.total = response.totalpages * this.listQuery.page.size
        this.listLoading = false
      }).catch(err => {
        err
        this.listLoading = false
      })
    },
    // 重置数据
    resetTemp() {
      this.temp = {
        username: '', // 负责人姓名
        adminstrativeArr: [],
        adminstrative: '', // 行政区域
        address: '', // 详细地址
        company: '', // 公司名称
        job: '', // 所在岗位
        telephone: '', // 联系电话
        creditCode: '', // 信用代码
        dischargePermit: '', // 排污许可
        userId: this.token * 1 // 当前登录人ID
      }
      return this.temp
    },
    // 查看详情 - 油烟数据
    handleView(row) {
      this.temp = Object.assign({}, this.resetTemp(), row) // copy obj
      this.dialogStatus = 'view'
      this.dialogFormVisible = true
    },
    // 查看详情 - 净化器数据
    handleViewJHQ(row) {
      this.temp = Object.assign({}, this.resetTemp(), row) // copy obj
      this.dialogStatus = 'viewJHQ'
      this.dialogFormVisible = true
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
